import { ref, nextTick, h, render, onUnmounted } from 'vue';
import gimbalControl from '@/components/gimbalControl/index.vue';

export default function useFullscreen() {
  const isFullscreen = ref(false);
  const isLeave = ref(false);
  const mountPoint = ref(null);
  const handleMouseEnter = () => {
    isLeave.value = true;
  };

  const handleMouseLeave = () => {
    isLeave.value = false;
  };

  const toggleFullscreen = (player, videoRef: HTMLElement, cameraIndexCode: string, cameraType: string) => {
    player.JS_FullScreenDisplay(true).then(
      () => {
        console.log(`wholeFullScreen success`);
      },
      (e) => {
        console.error(e);
      }
    );
    nextTick(() => {
      const parentWnd = videoRef?.querySelector('.parent-wnd');
      if (parentWnd) {
        mountPoint.value = document.createElement('div');
        parentWnd.appendChild(mountPoint.value);

        // 动态渲染组件（共享当前应用上下文）
        const vnode = h(gimbalControl, {
          // 可传递 props
          cameraIndexCode,
          cameraType
        });
        render(vnode, mountPoint.value);
      }
    });
  };
  return {
    isFullscreen,
    isLeave,
    mountPoint,
    handleMouseEnter,
    handleMouseLeave,
    toggleFullscreen
  };
}
